//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
    AppRegistry, // 注册APP入口
    StyleSheet, //样式表组件
    Image, //添加image组件
    Text, //文字组件,它里面只能放文字 类似于 span 标签
    View //结构组件,它类似于 div 标签
} from 'react-native';

/*
resizeMode 枚举类型，其值为cover，contain，stretch。表示图片适应的模式

source 图片的引用地址，值为{uri:string} 如果是一个本地的静态资源，那么需要使用require('image!name')包裹

defaultSource IOS支持的属性，表示默认的图片地址，如果网络图片加载完成，将取代defaultSource
onLoad IOS支持的属性，加载成功时候触发事件
onLoadEnd IOS支持的属性，不管加载成功或者失败，都触发该事件
onLoadStart IOS支持的属性，加载开始时候触发该事件
onProgress IOS支持的属性，加载过程的进度事件
*/
//创建一个 MyApp 组件
class MyApp extends Component{
    load(){
        alert('图片加载成功');
    }
    end(){
        alert('欢迎光临');
    }
 render(){
     return(
         <View style={styles.wp}>
             <Image
              style={styles.img}
               resizeMode='cover'
              source={{uri:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1495857318&di=16a22ddee6fc3db0f95234f380cf7a63&src=http://d.5857.com/xgs_150428/desk_005.jpg'}}
              defaultSource={require('./img/wqy.jpg')}
              onLoad = {this.load}
              onLoadEnd = {this.end}
             />
         </View>
     );
 }
}

//设置样式
const styles = StyleSheet.create({
    img:{
        width:400,
        height:400,
    },
    wp:{
        width:400,
        height:400,
        marginTop:40,
        borderWidth:1,
        borderColor:'#f00'
    }
});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);